<template>

  <div class="userInfo">
    <van-nav-bar title="编辑资料" :border="false" right-text="保存" left-arrow @click-left="$router.back()"
      @click-right="save" />
    <van-cell-group>
      <input type="file" hidden id="file" accept="image/*" ref="file" @change="change" />
      <van-cell title="头像" center>
        <!-- 点击label标签 也会触发 他for的那个元素的点击 -->
        <label for="file">
          <van-image width="50" height="50" round fit="cover" :src="userInfo.avatar" />
        </label>
      </van-cell>
      <van-cell title="昵称" :value="userInfo.nickname" is-link @click="nickNameShow=true" />
      <van-cell title="性别" :value="userInfo.sex" is-link @click="sexShow=true" />
      <van-cell title="生日" :value="userInfo.birthday" @click="birthdayShow=true" is-link />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="学校" value="郑州大学" is-link />
      <van-cell title="所在地" value="郑州" is-link />
      <van-cell title="职业" value="前端开发工程师" is-link />
    </van-cell-group>


    <!-- 生日弹出层 -->
    <van-popup round v-model="birthdayShow" position="bottom">
      <van-datetime-picker v-model="userInfo.birthday" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
        @confirm="birthdayConfirm" />
    </van-popup>


    <!-- 性别选择器 -->
    <van-popup round v-model="sexShow" position="bottom">
      <van-picker show-toolbar :columns="['男','女','其他']" v-model="userInfo.sex" @confirm="sexConfirm"
        @cancel="sexShow=false" />
    </van-popup>

    <!-- 昵称 -->
    <van-popup round v-model="nickNameShow" :style="{ width:'80%' }">
      <div class="nickname">
        <h3 style="text-align: center;">修改昵称</h3>
        <van-field v-model="userInfo.nickname" label="昵称" placeholder="请输入昵称" />
        <div class="footer">
          <van-button size="large" color="rgb(244, 246, 246)" type="primary" @click="nickNameShow=false">取消</van-button>
          <van-button size="large" color="rgb(244, 246, 246)" type="info" @click="nickNameShow=false">保存</van-button>
        </div>
      </div>

    </van-popup>
  </div>
</template>

<script>
import { Cell, CellGroup, Popup, DatetimePicker, Picker, Field, Button } from 'vant';
import { editUserInfo } from '@/API/user';
import { mapActions } from "vuex";

export default {
  data() {
    return {
      birthdayShow: false,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      sexShow: false,
      nickNameShow: false,
      nickanme: '',

    }
  },
  computed: {
    userInfo() {
      let n = JSON.parse(JSON.stringify(this.$store.state.users.userInfo))
      return n
    }

  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  methods: {
    ...mapActions('publishs',["upload"]),
    async change(e) {
      let fileList = [...e.target.files].map(v => {
        return {
          file: v
        }
      })
      let [avatar] = await this.upload(fileList)
      this.userInfo.avatar = avatar
      console.log(this.userInfo.avatar);
      this.$forceUpdate();
    },
    look() {
      console.log(this.userInfo);
    },
    sexConfirm(value) {
      console.log(value);
      this.userInfo.sex = value
      this.sexShow = false

    },
    onCancel() {
      this.sexShow = false
    },
    save() {
      let { sex, nickname, birthday, _id: uid, avatar } = this.userInfo
      console.log(sex, nickname, birthday, uid, avatar);
      editUserInfo({
        sex, nickname, birthday, uid, avatar
      }).then(res=>{
        if (res.code==0) {
          this.$toast('信息修改成功')
          let token=localStorage.getItem('token')
          this.$store.dispatch('users/getuserInfo',token)
          setTimeout(() => {
            this.$router.push('/my')
          }, 1000);
        }
      })
    },
    birthdayConfirm(val) {
      console.log(val); //  日期对象
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let date = val.getDate();
      let d = [year, month, date].map(v => {
        return (v + '').length > 1 ? v : '0' + v
      }).join('/')
      // console.log(d);
      this.userInfo.birthday = d
      this.birthdayShow = false;

    }
  },


}
</script>

<style lang="less" scoped>
::v-deep .van-cell-group {
  margin-top: 15px;
}

::v-deep .van-nav-bar {
  background-color: @baseColor;
}

.nickname .van-cell {
  background-color: rgb(244, 246, 246);
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

::v-deep .van-button__text {
  color: @baseColor;
}

::v-deep .van-nav-bar .van-icon {

  color: #fff;
}

::v-deep .van-nav-bar__text {
  color: #fff;
}

.userInfo {
  width: 375px;
  height: 100vh;
  background-color: rgb(244, 246, 246);
}

.nickname {
  box-sizing: border-box;
  padding: 18px 0;

  h3 {
    line-height: 2;
  }

  .footer {
    margin-top: 15px;
    // padding: 18px;
    display: flex;
    // justify-content: space-around;
  }
}
</style>